window.onload = function () {
    var booctx = new Vue({
        el: '.book-ctx',
        data: {
            row: 0,
            col: 0,
            seatPick: [],
            seatRect: {},
            seatType: [
                {
                    name: '单人桌',
                    type: 'single'
                },
                {
                    name: '双人桌(横排)',
                    type: 'double-r'
                },
                {
                    name: '双人桌(竖排)',
                    type: 'double-c'
                },
                {
                    name: '四人桌',
                    type: 'quadra'
                }
            ]
        },
        created: function () {
            // 获取座位数据，数据格式如下所示（这里异步从接口获取如rdata数据格式类型的数据）
            var self = this;
            var rdata = {
                row: 16,
                col: 16,
                seatRect: {
                    1: {
                        // 是否已经被预订
                        isbook: true,
                        seatList : [{
                            pos: "1,1",
                            tableType: "quadra"
                        },
                        {
                            pos: "1,2",
                            tableType: "quadra"
                        },
                        {
                            pos: "2,1",
                            tableType: "quadra"
                        },
                        {
                            pos: "2,2",
                            tableType: "quadra"
                        }]
                    },
                    2: {
                        isbook: false,
                        seatList : [{
                            pos: "1,4",
                            tableType: "double-r"
                        },
                        {
                            pos: "1,5",
                            tableType: "double-r"
                        }]
                    }
                }
            };
            self.row = rdata.row;
            self.col = rdata.col;
            self.getSeatInfo(rdata.seatRect);
        },
        methods: {
            getSeatInfo: function (seatData) {
                // 解析位置信息
                var self = this;
                for (var item in seatData) {
                    for (var i=0; i<seatData[item].seatList.length; i++) {
                        if (seatData[item].isbook) {
                            seatData[item].seatList[i].ispick = true;
                            seatData[item].seatList[i].isbook = true;
                            seatData[item].seatList[i].tableIndex = item;
                            Vue.set(self.seatRect, seatData[item].seatList[i].pos, seatData[item].seatList[i]);
                        } else {
                            seatData[item].seatList[i].ispick = true;
                            seatData[item].seatList[i].isbook = false;
                            seatData[item].seatList[i].tableIndex = item;
                            Vue.set(self.seatRect, seatData[item].seatList[i].pos, seatData[item].seatList[i]);
                        }
                    }
                }
            }
        }
    });
}